<template>
	<view style="padding-bottom: 80rpx;">
		<view class="nav">
			<u-tabs :current="check - 1" :itemStyle="{ width:'20%',height:'80rpx'}"
				:activeStyle="{ color: '#E84E22' , fontSize:'32rpx' }" lineColor='#E84E22'
				:inactiveStyle="{ color: '#666666',fontSize: '28rpx' }" :list="list1" @click="click"></u-tabs>
		</view>
		<view style="margin-top: 120rpx;">

		</view>
		<view class="bigBox" v-for="(item,index) in list" :key="index">
			<view class="goodBox" @click="toOrderDetils(item.id,item.status)">
				<view class="goodTitle">
					<view class="titBox">
						<view class="title">
							订单编号:{{item.no}}
						</view>
						<image class="titlIcon" src="../../static/images/minde/arrow.png"></image>
					</view>
					<view v-if="item.items[0].afterSaleStatus==0">
						<view class="statu2" v-if="item.status==0">
							待付款
						</view>
						<view class="statu2" v-if="item.status==10">
							待发货
						</view>
						<view class="statu2" v-if="item.status==20">
							待收货
						</view>
						<view class="statu3" v-if="item.status==30">
							已收货
						</view>
						<view class="statu3" v-if="item.status==40">
							已取消
						</view>
					</view>
					<view v-else>
						<view class="statu2" v-if="item.items[0].afterSaleStatus==20">
							售后成功
						</view>
						<view class="statu2" v-if="item.items[0].afterSaleStatus==10">
							售后中
						</view>
					</view>
					<view v-if="check==5">
						<view class="statu2" v-if="item.status==20">
							售后成功
						</view>
						<view class="statu2" v-if="item.status==61">
							取消售后
						</view>
						<view class="statu2" v-if="item.status==62">
							拒绝售后
						</view>
						<view class="statu2" v-if="item.status==10">
							售后中
						</view>
						<view class="titleTxt" v-if="item.status==40">
							等待退款
						</view>
					</view>
				</view>
				<!-- <view class="orderCode">
					订单编号：222222222222222222
				</view> -->
				<view class="socr">
					<u-scroll-list :indicator='false'>
						<view v-for="(item2, index) in item.items" :key="index">
							<image :class="index!=0?'scrollImg marginL':'scrollImg'" :src="item2.picUrl"></image>
						</view>
					</u-scroll-list>
				</view>
				<view class="goodInfo">
					<view class="time" v-if="check!=5">
						{{parseTime(item.createTime)}}
					</view>
					<view class="time" v-else>
						{{parseTime(item.refundTime)}}
					</view>
					<view class="priceBox">
						<text style="font-size: 20rpx;color: #999999;" v-if="check!=5">共 <text
								style="color: #333333;">{{item.productCount}}</text>
							件商品</text><text style="margin-left: 20rpx;font-size: 24rpx;color: #333333;"
							v-if="check!=5">实付</text><text style="margin-left: 20rpx;font-size: 24rpx;color: #333333;"
							v-else>申请退款</text><text style="font-size: 20rpx;margin-left: 10rpx;">￥</text><text
							style="font-size: 36rpx;" v-if="check!=5">{{(item.payPrice/100).toFixed(2)}}</text>
						<text style="font-size: 36rpx;" v-else>{{(item.refundPrice/100).toFixed(2)}}</text>
					</view>
				</view>
				<view class="deleBox" v-if="item.status==0 || item.status==40 || item.status == 20">
					<view class="dele redBox" v-if="item.status==0" @click.stop="pay(item.payOrderId)">
						付款
					</view>
					<view class="dele" v-if="item.status==0" @click.stop="dele(item.id)">
						取消订单
					</view>
					<view class="dele" v-if="item.status==40" @click.stop="dele2(item.id)">
						删除订单
					</view>
					<view class="rece" @click.stop="receive(item.id)" v-if="item.status==20">
						收货
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderList,cancelOrder,deleteOrder,receive,refundPage
	} from "@/api/wine/wine.js"
	import {replenAfterSale} from "@/api/replenOrder/replenOrder.js"
	import {
		parseTime
	} from "@/utils/ruoyi"
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
					type: 1
				}, {
					name: '待付款',
					type: 2
				}, {
					name: '待收货',
					type: 3
				}, {
					name: '已收货',
					type: 4
				}, {
					name: '售后',
					type: 5
				}],
				check: 1,
				list: [],
				list: [], //订单数据
				pageNum: 1, //页码
				listnum: 0, //列表长度
				status: '', //订单状态
			}
		},
		//触底加载
		onReachBottom() {
			let that = this
			if (that.list.length == that.listnum) {
				uni.showToast({
					title: '没有更多了',
					icon: "none"
				})
			} else {
				that.pageNum = that.pageNum + 1
				that.getData()
			}
		},
		onLoad(e) {
			this.check = e.type
			if (e.type == 1) {
				this.status = ''
				this.list = []
				this.getData()
			} else if (e.type == 2) {
				this.status = 0
				this.list = []
				this.getData()
			} else if (e.type == 3) {
				this.status = 20
				this.list = []
				this.getData()
			} else if (e.type == 4) {
				this.status = 30
				this.list = []
				this.getData()
			} else {
				// this.status = 40
				this.list = []
				this.refundPageF()
			}
		},
		onShow() {
			if(this.check==5){
				this.refundPageF()
			}else{
				this.getData()
			}
		},
		methods: {
			//收货
			receive(e) {
				let that = this
				let data = {
					id: e,
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				receive(data).then(response => {
					uni.hideLoading()
					uni.$u.toast('收货成功')
					that.list = []
					that.listnum = 0
					that.pageNum = 1
					that.getData()
				})
			},
			//取消订单
			dele(e){
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data = {
					id:e
				}
				cancelOrder(data).then(response => {
					uni.hideLoading()
					uni.$u.toast('取消成功')
					that.list = []
					that.listnum = 0
					that.pageNum = 1
					that.getData()
				})
			},
			//删除订单
			dele2(e){
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data = {
					id:e
				}
				deleteOrder(data).then(response => {
					uni.hideLoading()
					uni.$u.toast('删除成功')
					that.list = []
					that.listnum = 0
					that.pageNum = 1
					that.getData()
				})
			},
			//获得退款订单
			refundPageF(){
				let that = this
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let data = {
					pageNo:that.pageNum,
					pageSize:10,
					// status:that.status,
					// orderType:2
				}
				refundPage(data).then(response => {
					uni.hideLoading()
					that.listnum = response.data.total
					if(that.list.length<response.data.total){
						// that.list = that.list.concat(res.data.rows)
						console.log(response.data.list);
						that.list = that.list.concat(response.data.list)
					}
				})
			},
			//获取订单
			getData() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data = {
					pageNo: that.pageNum,
					pageSize: 10,
					status: that.status,
				}
				getOrderList(data).then(response => {
					uni.hideLoading()
					that.listnum = response.data.total
					if (that.list.length < response.data.total) {
						// that.list = that.list.concat(res.data.rows)
						that.list = that.list.concat(response.data.list)
					}
				})
			},
			toOrderDetils(e, s) {
				if (this.check == 5) {
					this.$tab.navigateTo('/pages/orderDetails/orderDetails?id=' + e + '&status=' + s + '&type=' + 2 + '&reduce=' + 1)
				} else {
					this.$tab.navigateTo('/pages/orderDetails/orderDetails?id=' + e + '&status=' + s + '&type=' + 2)
				}
			},
			click(item) {
				this.check = item.type
				if (item.type == 1) {
					this.pageNum = 1
					this.status = ''
					this.list = []
					this.listnum = 0
					this.getData()
				} else if (item.type == 2) {
					this.status = 0
					this.pageNum = 1
					this.listnum = 0
					this.list = []
					this.getData()
				} else if (item.type == 3) {
					this.status = 20
					this.pageNum = 1
					this.listnum = 0
					this.list = []
					this.getData()
				} else if (item.type == 4) {
					this.status = 30
					this.pageNum = 1
					this.listnum = 0
					this.list = []
					this.getData()
				} else {
					// this.status = 40
					this.pageNum = 1
					this.listnum = 0
					this.list = []
					this.refundPageF()
				}
			},
			//付款
			pay(item) {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data2 = {
					id: item,
					channelCode: "wx_lite",
					channelExtras: {
						openid: uni.getStorageSync('openid')
					}
				}
				paySubmit(data2).then(response2 => {
					if (response2.code == 0) {
						let payData = JSON.parse(response2.data.displayContent)
						weixinPay(payData).then(response3 => {
							uni.hideLoading()
							uni.$u.toast('支付成功,请稍后查看')
							setTimeout(() => {
								that.getData()
							}, 1000)
						})
					}
				})
			},
			//时间处理
			parseTime(time) {
				return parseTime(time)
			},
		}
	}
</script>

<style>
	.nav {
		width: 750rpx;
		height: 100rpx;
		background-color: white;
		border-top: 2rpx solid #F1F1F1;
		position: fixed;
		top: 0;
		z-index: 1;
	}

	.bigBox {
		width: 690rpx;
		/* height: 500rpx; */
		margin: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.goodBox {
		width: 630rpx;
		/* height: 440rpx; */
		margin: 30rpx;
	}

	.goodTitle {
		width: 630rpx;
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.titBox {
		width: 500rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
	}

	.statu2 {
		width: 120rpx;
		height: 50rpx;
		font-size: 28rpx;
		color: #E84E22;
		text-align: end;
	}

	.statu3 {
		width: 100rpx;
		height: 50rpx;
		font-size: 28rpx;
		color: #999999;
		text-align: end;
	}

	.title {
		max-width: 450rpx;
		height: 50rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.titlIcon {
		width: 10rpx;
		height: 20rpx;
		margin: -8rpx 0 0 20rpx;
	}

	.orderCode {
		width: 630rpx;
		height: 30rpx;
		line-height: 20rpx;
		font-size: 20rpx;
		color: #999999;
		margin: 10rpx 0;
	}

	.socr {
		width: 630rpx;
		height: 180rpx;
		overflow: hidden;
	}

	.scrollImg {
		width: 156rpx;
		height: 156rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.marginL {
		margin-left: 12rpx;
	}

	.goodInfo {
		width: 630rpx;
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.time {
		width: 250rpx;
		height: 50rpx;
		font-size: 20rpx;
		color: #999999;
	}

	.priceBox {
		width: 350rpx;
		height: 50rpx;
		text-align: end;
	}

	.deleBox {
		width: 630rpx;
		height: 60rpx;
		margin-top: 50rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: flex-end;
	}

	.dele {
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		border: 2rpx solid #999999;
		border-radius: 28rpx;
		font-size: 24rpx;
		color: #999999;
		margin-left: 10rpx;
	}
	.redBox{
		border: 2rpx solid #F16645;
		color: #F16645;
	}

	.getOrder {
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		background-color: #E84E22;
		border-radius: 28rpx;
		font-size: 24rpx;
		color: #fff;
	}
	.rece{
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 28rpx;
		border: 2rpx solid #006200;
		color: #006200;
		font-size: 24rpx;
		margin-left: 10rpx;
	}
</style>